<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>
<script type="text/javascript">

function showCoords(evt){
evt=window.event;
  var form = document.forms.form_coords;
 // var parent_id = evt.target.parentNode.id;
  //form.parentId.value = parent_id;
  form.pageXCoords.value = evt.x;
  form.pageYCoords.value = evt.y;
  form.layerXCoords.value = evt.offsetX;
  form.layerYCoords.value = evt.offsetY;
}
</script>
<style type="text/css">
#d1 {
	border: solid blue 1px;
	padding: 20px;
}
#d2 {
	position: absolute;
	top: 180px;
	left: 80%;
	right:auto;
	width: 40%;
	border: solid blue 1px;
	padding: 20px;
}
#d3 {
	position: absolute;
	top: 240px;
	left: 20%;
	width: 50%;
	border: solid blue 1px;
	padding: 10px;
}
#d4 {
	position: absolute;
	top: 100px;
	left: 20%;
	right:auto;
	width: 40%;
	border: solid blue 10px;
	padding: 20px;
}
#d5{
	
	width:500;
	height:500;
	overflow:scroll;
	border: solid blue 10px;
	padding: 20px;
}
</style>
</head>
<body onmousedown="showCoords(event)" style="border:solid blue 10px;">
<p>To display the mouse coordinates please click anywhere on the page.</p>
<div>
<div>
<div id="d4">
  <div >
    <div id="d1"> <span>This is an un-positioned div so clicking it will return
      layerX/layerY values almost the same as pageX/PageY values.</span> </div>
    <div> 
    </div>
    <div id="d2"> <span>This is a positioned div so clicking it will return layerX/layerY
      values that are relative to the top-left corner of this positioned
      element. Note the pageX\pageY properties still return the
      absolute position in the document, including page scrolling.</span> <span>Make the page scroll more! This is a positioned div so clicking it
      will return layerX/layerY values that are relative to the top-left
      corner of this positioned element. Note the pageX\pageY properties still
      return the absolute position in the document, including page
      scrolling.</span> </div>
    <div id="d3">
      <form name="form_coords" id="form1">
        Parent Element id:
        <input type="text" name="parentId" size="7" />
        <br />
        X:
        <input type="text" name="pageXCoords" size="7" />
        Y:
        <input type="text" name="pageYCoords" size="7" />
        <br />
        offsetX:
        <input type="text" name="layerXCoords" size="7" />
        offsetY:
        <input type="text" name="layerYCoords" size="7" />
      </form>
    </div>
  </div>
</div>
</body>
</html>
